import React from 'react';
import { FieldNodeSchema } from '@/app/codeTreeSlice';
import renderToolbar from './renderToolbar';
import renderIcon from './renderIcon';
import renderQuickAccessProd from './renderQuickAccessProd';
import SliderComponent from '@/components/SliderComponent';
import renderFloor from './renderFloor';
import renderTopUp from './renderTopUp';
import renderDITOMCCMPost from './renderDITOMCCMPost';
import renderDITOGCPPost from './renderDITOGCPPost';
import renderDITOToolbar from './renderDITOToolbar';
import renderDashboard from './renderDashboard';
import renderNavigationBar from './renderNavigationBar';
import renderQuickRedemption from './renderQuickRedemption';
import renderInformationBar from './renderInformationBar';
import renderSinglePost from './renderSinglePost';
import renderCarouselPost from './renderCarouselPost';
import renderGraphicPost from './renderGraphicPost';
import renderDITOCountdownPost from './renderDITOCountdownPost';
import renderDITOMultiCountdownPosts from './renderDITOMultiCountdownPosts';
import renderDITOWhoopieSharetreats from './renderDITOWhoopieSharetreats';
import renderWEBNotice from './renderWEBNotice';
import renderWEBDevices from './renderWEBDevices';
import renderNewToolbar from './renderNewToolbar';
import JourneyToolbarProd from './JourneyToolbarProd';
import ELoadBalancePto from './ELoadBalancePto';
import CurrentSubsPlanProd from './CurrentSubsPlanProd';
import renderTmFamilyPlanDetails from './renderTmFamilyPlanDetails';
import renderBroadbandAccount from './renderBroadbandAccount';
import renderCountdownPost from './renderCountdownPost';
import renderEnhancedVideos from './renderEnhancedVideos';
import renderDITOSraBanner from './renderDITOSraBanner';
import renderGreetingsToolbar from './renderGreetingsToolbar';
import renderHotNews from './renderHotNews';
import renderDITOCarouselBanner from './renderDITOCarouselBanner';
import renderTouristGuide from './renderTouristGuide';
import renderMutiDashboard from './renderMutiDashboard';
import renderMutiDashboardAI from './renderMutiDashboardAI';
import renderCustomizedComponent from './renderCustomizedComponent';
import renderDITORoaming from './renderDITORoaming';
import renderDITOSimRegistration from './renderDITOSimRegistration';
import renderBundleDashboard from './renderBundleDashboard';
import renderBuyPassModule from './renderBuyPassModule';
import renderJourneyPlanListProd from './renderJourneyPlanListProd';
import BillingTrendsWebProd from './BillingTrendsWebProd';
import renderSubsInfo from './renderSubsInfo';
import renderMccmPost from './renderMccmPost';
import renderQuickRecharge from './renderQuickRecharge';
import renderDashWeb from './renderDashWeb';
import renderRecentPayments from './renderRecentPayments';
import renderSuccessBlockProd from './renderSuccessBlockProd';
import renderMarketingOfferList from './renderMarketingOfferList';
import renderMyRetailSalesProd from './renderMyRetailSalesProd';
import MobileDashboardProd from './MobileDashboardProd';
import renderFamilyHubDashboardProd from './renderFamilyHubDashboardProd';
import renderMptQuickAccessProd from './renderMptQuickAccessProd';
import renderMptDashboard from './renderMptDashboard';
import renderMptSpecialOffer from './renderMptSpecialOffer';
// import renderUsageTrendsProd from './renderUsageTrendsProd';
import styles from '../index.less';

export default function renderComponentStyle(
  focusComponent: FieldNodeSchema | undefined,
  handleChange: (value: any, key: string) => void,
  pageVerInfo?: any,
) {
  if (focusComponent?.type === 'Icon') {
    return renderIcon(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'QuickAccessProd') {
    return renderQuickAccessProd(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'FloorPoster') {
    return renderFloor(focusComponent, handleChange);
  }

  if (focusComponent?.type === 'Toolbar') {
    return renderToolbar(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'TopUp') {
    return renderTopUp(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'DITOMCCMCarouselPost') {
    return renderDITOMCCMPost(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'DITOGCPFloorPoster') {
    return renderDITOGCPPost(focusComponent, handleChange);
  }

  if (focusComponent?.type === 'DITOToolbar') {
    return renderDITOToolbar(focusComponent, handleChange);
  }

  if (focusComponent?.type === 'Dashboard') {
    return renderDashboard(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'ESalesInventoryProd') {
    return renderCarouselPost(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'NavigationBar') {
    return renderNavigationBar(focusComponent, handleChange);
  }

  if (focusComponent?.type === 'QuickRedemption') {
    return renderQuickRedemption(focusComponent, handleChange);
  }

  if (focusComponent?.type === 'InformationBar') {
    return renderInformationBar(focusComponent, handleChange);
  }

  if (focusComponent?.type === 'SinglePost') {
    return renderSinglePost(focusComponent, handleChange, pageVerInfo);
  }

  if (focusComponent?.type === 'CarouselPost') {
    return renderCarouselPost(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'ESalesBulletinProd') {
    return renderCarouselPost(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'GraphicPost') {
    return renderGraphicPost(focusComponent, handleChange);
  }

  if (focusComponent?.type === 'HotNews') {
    return renderHotNews(focusComponent, handleChange);
  }

  if (focusComponent?.type === 'CountdownPost') {
    return renderCountdownPost(focusComponent, handleChange);
  }

  if (focusComponent?.type === 'DITOCountdownPost') {
    return renderDITOCountdownPost(focusComponent, handleChange);
  }

  if (focusComponent?.type === 'DITOMultiCountdownPosts') {
    return renderDITOMultiCountdownPosts(focusComponent, handleChange);
  }

  if (focusComponent?.type === 'DITOWhoopieSharetreats') {
    return renderDITOWhoopieSharetreats(focusComponent, handleChange);
  }

  if (focusComponent?.type === 'WEBNotice') {
    return renderWEBNotice(focusComponent, handleChange);
  }

  if (focusComponent?.type === 'WEBDevices') {
    return renderWEBDevices(focusComponent, handleChange);
  }

  if (focusComponent?.type === 'NewToolbar') {
    return renderNewToolbar(focusComponent, handleChange, pageVerInfo);
  }

  if (focusComponent?.type === 'JourneyToolbarProd') {
    return JourneyToolbarProd(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'CurrentSubsPlanProd') {
    return CurrentSubsPlanProd(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'MobileDashboardProd') {
    return MobileDashboardProd(focusComponent, handleChange);
  }

  if (focusComponent?.type === 'RoamingDashboardProd') {
    return MobileDashboardProd(focusComponent, handleChange);
  }

  if (focusComponent?.type === 'TmFamilyPlanDetails') {
    return renderTmFamilyPlanDetails(focusComponent, handleChange);
  }

  if (focusComponent?.type === 'BroadbandAccount') {
    return renderBroadbandAccount(focusComponent, handleChange);
  }

  if (focusComponent?.type === 'EnhancedVideos') {
    return renderEnhancedVideos(focusComponent, handleChange);
  }

  if (focusComponent?.type === 'DITOSraBanner') {
    return renderDITOSraBanner(focusComponent, handleChange);
  }

  if (focusComponent?.type === 'GreetingsToolbar') {
    return renderGreetingsToolbar(focusComponent, handleChange);
  }

  if (focusComponent?.type === 'DITOCarouselBanner') {
    return renderDITOCarouselBanner(focusComponent, handleChange);
  }

  if (focusComponent?.type === 'TouristGuide') {
    return renderTouristGuide(focusComponent, handleChange);
  }

  if (focusComponent?.type === 'MutiBalanceDashboard') {
    return renderMutiDashboard(focusComponent, handleChange);
  }

  if (focusComponent?.type === 'MutiBalanceDashboardAI') {
    return renderMutiDashboardAI(focusComponent, handleChange);
  }

  if (focusComponent?.type === 'CustomizedComponent') {
    return renderCustomizedComponent(focusComponent, handleChange);
  }

  if (focusComponent?.type === 'DITORoaming') {
    return renderDITORoaming(focusComponent, handleChange);
  }

  if (focusComponent?.type === 'DITOSimRegistration') {
    return renderDITOSimRegistration(focusComponent, handleChange);
  }

  if (focusComponent?.type === 'BundleDashboard') {
    return renderBundleDashboard(focusComponent, handleChange);
  }

  if (focusComponent?.type === 'BuyPassModule') {
    return renderBuyPassModule(focusComponent, handleChange, pageVerInfo);
  }
  if (focusComponent?.type === 'BillingTrendsWebProd') {
    return BillingTrendsWebProd(focusComponent, handleChange);
  }
  if (['NotificationBarProd', 'SubscriptionListProd', 'JourneyAvailPackListProd', 'JourneyPlanListProd'].includes(focusComponent?.type || '')) {
    return renderJourneyPlanListProd(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'WalletBalanceProj') {
    return renderJourneyPlanListProd(focusComponent, handleChange, '#ffffff');
  }
  if (focusComponent?.type === 'ELoadBalancePto') {
    return ELoadBalancePto(focusComponent, handleChange);
  }
  if (['FunctionServiceProd', 'PackTypeInfoProj'].includes(focusComponent?.type || '')) {
    return renderJourneyPlanListProd(focusComponent, handleChange, '#ffffff', 'notBgImg');
  }
  if (focusComponent?.type === 'SubsInfo') {
    return renderSubsInfo(focusComponent, handleChange);
  }

  if (focusComponent?.type === 'MarketingBannerProd') {
    return renderMccmPost(focusComponent, handleChange);
  }

  if (focusComponent?.type === 'QuickRecharge') {
    return renderQuickRecharge(focusComponent, handleChange);
  }

  if (focusComponent?.type === 'BalanceDashboardWeb') {
    return renderDashWeb(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'RecentPayments') {
    return renderRecentPayments(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'MyRetailSalesProd') {
    return renderMyRetailSalesProd(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'MonthlyWholesalesAmountProd') {
    return renderMyRetailSalesProd(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'MembershipWidgetProd') {
    return renderMyRetailSalesProd(focusComponent, handleChange, true);
  }
  if (focusComponent?.type === 'AppFooterProd') {
    return renderMyRetailSalesProd(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'AccountBalanceDetailProd') {
    return renderMyRetailSalesProd(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'RichTextBlockProd') {
    return renderMyRetailSalesProd(focusComponent, handleChange, true);
  }
  if (focusComponent?.type === 'SuccessBlockProd') {
    return renderSuccessBlockProd(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'MarketingOfferListProd') {
    return renderMarketingOfferList(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'FamilyHubDashboardProd') {
    return renderFamilyHubDashboardProd(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'MptQuickAccessProd') {
    return renderMptQuickAccessProd(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'MptDashboard') {
    return renderMptDashboard(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'MptSpecialOffer') {
    return renderMptSpecialOffer(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'BalanceDashboardWebProd') {
    return renderJourneyPlanListProd(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'UsageTrendsProd') {
    return BillingTrendsWebProd(focusComponent, handleChange);
  }
  if (focusComponent?.type === 'UsageTrendsProd2') {
    return BillingTrendsWebProd(focusComponent, handleChange);
  }

  return (
    <div className={styles.styleBox}>
      <SliderComponent
        minNum={0}
        maxNum={30}
        currValue={focusComponent?.props.topMargin - 0}
        hasTitle
        title="Top Margin"
        onNumChange={(value: number) => handleChange(`${value}`, 'topMargin')}
      />
    </div>
  );
}
